<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟考试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/beijing.js"></script>
    <script src="js/plug-in.min.js"></script>
    <style>
        .glyphicon-user {
            position: absolute;
            top:45px;
            left: 20px; }

        .glyphicon-lock {
            position: absolute;
            top: 117px;
            left: 20px; }
        .timespan {
            font-size: 20px;
            color: #1330d8;
            font-weight: bolder;
            margin-top: 120px;
            margin-bottom: 20px;
            font-family: Arial, Verdana, "微软雅黑";
        }

        .J_TbData {
            font-size: 16px;
            font-weight: bold;
        }

        .listExam {
            margin-top: 160px;
            border: solid 1px;
            border-radius: 6%;
            /*margin-left: 40px;*/
            font-size: 18px;
        }

        .list-group-item-heading {
            list-style: none;
            color: whitesmoke;
            margin-left: 40px;
            margin-top: 20px;
        }

        html, body {
            margin: 0;
            background: #14191C;
        }
        .all {
            position: absolute;
            z-index: 999;
        }

        .J_TbData {
            color: #bdbdbd;
        }

        .itemright {
            padding-left: 60px;
        }
        .navbar-inverse input[type="text"] {
            background: #313131;
            border: none;
            color: #999; }

        .navbar-inverse .navbar-form {
            position: relative; }

        .navbar-form button[type="submit"] {
            background: #313131;
            border: none;
            color: #999;
            position: absolute;
            top: 28%;
            right: 8%; }

        @media (min-width: 768px) {
            .navbar-form button[type="submit"] {
                top: 15%; } }
        .img img {
            width: 200px;
            height: 160px;
        }


        .login-modal {
            padding-top: 30px; }
        .login-modal .modal-content {
            background-color: rgb(252, 250, 255);
            color: #000000; }
        .login-modal .modal-content .modal-body input {
            color: #000000;
            background: rgb(255, 255, 255); }
        .login-modal .modal-content .modal-header .close {
            color: #ff110c; }
        .login-modal .modal-content .modal-footer {
            text-align: center; }
        .login-modal .modal-content .modal-footer .btn {
            font-size: 16px;
            background: rgba(0, 0, 0, 0.92);
            width: 150px; }

        .register-modal {
            padding-top: 50px; }
        .register-modal .modal-content {
            background-color: rgb(247, 247, 247);
            color: #000000; }
        .register-modal .modal-content .modal-body input {
            color: #000000;
            background: rgb(255, 255, 255); }
        .register-modal .modal-content .modal-header .close {
            color: #ff110c; }
        .register-modal .modal-content .modal-footer {
            text-align: center; }
        .register-modal .modal-content .modal-footer .btn {
            font-size: 16px;
            background: rgba(0, 0, 0, 0.92);
            width: 150px; }

        .dropdown-menu{
            margin: 0;
            padding: 0;
            border: 1px solid #000;
            background: #2f2f2f;
            min-width: 100px;
            height: 55px;
        }
        .dropdown-menu>li{
            width: 100px;
            border-radius: 4px;
        }
        .dropdown-menu>li a{
            color: #9a9a98;
            width: 100px;
            border-radius: 4px;
        }
        .dropdown-menu>li a:hover{
            background: #000000;
            color: white;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top navtop">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse"
                    data-target="#response-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="backHome" class="">
                <!--<strong>BY一考通</strong>-->
                <img src="images/LOGO_03.png" alt="LOGO" width="100px" style="display: block;line-height:90px;">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="response-collapse">
            <ul class="nav navbar-nav ulDaoHang" id="nav">
                <li class="itemdisplay" style="display: none"><a href="toaddItem">添加试题</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="mockExam">模拟考试
                        <span class="caret">
                                </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="mockExam">科目一</a></li>
                        <li><a href="mockExam4">科目四</a></li>
                    </ul>
                </li>
                <li><a href="practice">随机练习</a></li>
                <li><a href="practice2">顺序练习</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="">针对练习
                        <span class="caret">
                                </span>
                    </a>
                    <ul class="dropdown-menu" role="menu" style="height:105px; ">
                        <li><a href="toForPractice?role=3">图片题</a></li>
                        <li><a href="toForPractice?role=2">文字题</a></li>
                        <li><a href="toForPractice?role=1">选择题</a></li>
                        <li><a href="toForPractice?role=0">判断题</a></li>
                    </ul>
                </li>
            </ul>
            <div class="profile navbar-right">
                <ul class="nav navbar-nav">
                    <li class="nowuser" style="display: none;"><a href="#" id="loginOut">退出当前用户:</a></li>
                    <li><a href="displayUser" class="usernamedisplay"></a></li>
                    <li class="displaylogin"><a href="#" data-toggle="modal"
                                                data-target="#login-modal">登录</a></li>
                    <li class="displaylogin"><a href="#" data-toggle="modal"
                                                data-target="#register-modal">注册</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<!--//登录-->
<div class="modal fade login-modal" id="login-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4>
                    <b>用户登录</b>
                </h4>
            </div>
            <div class="modal-body">
                <div>
                    <!--<form method="post">-->
                    <div class="form-group">
                        <label for="username">Username <span
                                class="glyphicon glyphicon-user"></span> <input type="text"
                                                                                   name="username" class="form-control"
                                                                                   id="username"
                                                                                   placeholder="输入用户名"
                                                                                   style="padding-left: 22px"></label>
                    </div>
                    <div class="form-group">
                        <label for="password">Password <span
                                class="glyphicon glyphicon-lock"></span> <input type="password"
                                                                                   name="password" class="form-control"
                                                                                   id="password"
                                                                                   placeholder="输入密码"
                                                                                   style="padding-left: 22px"></label>
                    </div>
                    <div class="modal-footer">
                        <input type="submit"  style="color: white" class="btn btn-group-xs" id="userLogin" value="login">
                        <!--<button onclick="loginUser()" class="btn btn-group-xs">login</button>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--注册-->
<div class="modal fade login-modal" id="register-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4>
                    <b>用户注册</b>
                </h4>
            </div>
            <div class="modal-body">
                <div id="form2">
                    <div class="form-group">
                        <label for="username">Username<span
                                class="glyphicon glyphicon-user"></span> <input type="text"
                                                                                name="username" class="form-control"
                                                                                id="rusername"
                                                                                placeholder="输入用户名"
                                                                                style="padding-left: 22px"></label>
                        <br><i id="iusername" style="position: absolute;top:70px;"></i>
                    </div>
                    <div class="form-group">
                        <label for="password">Password <span
                                class="glyphicon glyphicon-lock"></span>
                            <input type="password"
                                   name="password" class="form-control"
                                   id="rpassword"
                                   placeholder="输入密码"
                                   style="padding-left: 22px"></label>
                    </div>
                    <div class="form-group">
                        <label for="remail">Email
                            <span style="position: absolute;top: 192px;left: 20px;" class="glyphicon glyphicon-envelope"></span>
                            <input type="email"
                                   name="email" class="form-control"
                                   id="remail"
                                   placeholder="输入邮箱"
                                   style="padding-left: 22px">
                        </label>
                        <p></p>
                        <input type="hidden" id="yanzhengma-hidden">
                        <input class="btn-sm"  placeholder="输入验证码" style="border: silver;height: 35px;" type="text" id="YanZhengMa">
                        <input type="button" value="获取验证码" class="btn btn-sm" id="GetYanZhengMa"/>
                    </div>
                    <div class="modal-footer" style="text-align: center">
                        <button type="submit" class="btn btn-group-sm" style="color: white;background: #000; width: 150px;" id="userRegister">注册
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--试题-->
<div class="container all">
    <div class="row">
        <div class="col-md-8 col-sm-12 col-xs-12  examleft">
            <div class="listExam">
                <p></p>
                &nbsp;<b style="color: #f4fbea">科目四模拟考试</b>
                <ul class="list-group list">
                    <li class="list-group-item-heading"><span class="itemNo">(题号)</span>
                        <span class="itemComment">这里是试题内容</span></li>
                    <li class="list-group-item-heading examItem" id="examItem">
                        <p class="itemA"></p>
                        <p class="itemB"></p>
                        <p class="itemC"></p>
                        <p class="itemD"></p> <span class="img">图片</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-4 col-sm-12 col-xs-12  itemright">
            <div class="time">
                <div class="timespan">
                    <span>剩余时间</span> <span class="joinm time"></span><span> :</span>
                    <span class="joins time"></span>
                </div>

            </div>
            <table border="1px" id="J_TbData"
                   class="J_TbData table tab-content text-center table-bordered">
            </table>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    //刷新提示
    //申明localstorage
    var storage=window.localStorage;
    //从localstorage获得用户信息
    $(".usernamedisplay").text(storage.getItem("username"));
    //刷新当前用户
    setInterval(function () {
        displayuser();
    },1000);

    //登陆成功后隐藏登录注册按钮
    function displayuser() {
        a = $(".usernamedisplay").text();
        if (a!="") {
            $(".displaylogin").css('display', 'none');
            $(".nowuser").css('display', 'block');
        }
    }
    //判断用户是否存在
    $("#rusername").on('keyup',function () {
        $("#iusername").html("");
    })
    $("#rusername").on('blur',function () {
        if($("#rusername").val()==""){

        }else{
            $.ajax({
                url:'queryUserByUsername',
                type:'post',
                dataType:'json',
                data:{username:$('#rusername').val()},
                success:function (res) {
                    if(res!=0){
                        $("#iusername").html("<span style=\"color: red\">用户名已存在</span>");
                        $("#rusername").focus();
                    }else{
                        $("#iusername").html("<span style=\"color: green\">用户名可以使用</span>");
                    }
                }
            })
        }

    })
    //登录
    $("#userLogin").on("click", function () {
        $.ajax({
            url: "/login" ,//url
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            data: {username:$("#username").val(),password:$("#password").val()},
            success: function (res) {
                storage.setItem("username",res.username);
                storage.setItem("id",res.id);
                storage.setItem("type",res.type);
                $.Pop('<h5>登录成功</h5>','alert',function(){window.location.reload()});
            },
            error : function() {
                $.Pop('<h5>登录失败,请重新登录</h5>','alert',function(){window.location.reload()});
            }
        });
    });
    //注册
    $("#userRegister").on("click", function () {
        var myreg = /[^\s]/;
        var myreg2 = /\w{5,17}$/;
        //名称不能为空
        if (!myreg.test($("#rusername").val())) {
            $.Pro('用户名不能为空', {BoxBgopacity: 1});
            $("#rusername").focus();
            return false;
        }

        if (!myreg2.test($("#rpassword").val())) {
            $.Pro('请输入6~18密码', {BoxBgopacity: 1});
            $("#rpassword").focus();
            return false;
        }
        if(!myreg.test($("#YanZhengMa").val())){
            $.Pro('验证码不能为空', {BoxBgopacity: 1});
            return false;
        }
        else if( $("#yanzhengma-hidden").val()!= $("#YanZhengMa").val()){
            $.Pro('验证码错误', {BoxBgopacity: 1});
            return false;
        }
        else {
            $.ajax({
                url: "/register",
                type: "POST",
                dataType: "json",
                data: {username: $("#rusername").val(), password: $("#rpassword").val()},
                success: function (res) {
                    storage.setItem("username", res.username);
                    storage.setItem("id", res.id);
                    storage.setItem("type", res.type);
                    $.Pop('<h5>注册成功</h5>', 'alert', function () {
                        window.location.reload()
                    });
                }, error: function () {
                    $.Pop('<h5>注册失败,请重新注册</h5>', 'alert', function () {
                        window.location.reload()
                    });
                }

            });
        }
    });
    //enter提交登录、注册
    $(document).keypress(function(e) {
        // 回车键事件
        if(e.which == 13) {
            // jQuery(".confirmButton").click();
            if($("#username").val()!=''){
                jQuery("#userLogin").click();
            }
            else if($("#rusername").val()!=''){
                jQuery("#userRegister").click();
            }
        }
    });
    //退出登录
    $("#loginOut").on("click",function () {
        localStorage.removeItem("username");
        localStorage.removeItem("id");
        localStorage.removeItem("type");
        window.location.reload(); //刷新当前页面
    });
    //显示\隐藏题库
    itemdisplay();

    function itemdisplay() {
        if (localStorage.getItem("type") == 1) {
            $(".itemdisplay").fadeIn(2000);
        }
    }

    var setTimer = null;
    var chazhi = 0;
    //差值计算
    //例子(模拟)
    // chazhi = 15880;
    chazhi = 2699600;
    //真实时间(注意月份需减掉1，否则时间会计算错误)
    //chazhi = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
    //chazhi = (new Date(2018,8-1,6,6,6,6)) - (new Date());

    //执行函数部分
    countFunc(chazhi);
    setTimer = setInterval(function() {
        chazhi = chazhi - 1000;
        countFunc(chazhi);
    }, 1000);

    function countFunc(leftTime) {
        if (leftTime >= 0) {
            var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
            var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
            var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
            var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
            days = checkTime(days);
            hours = checkTime(hours);
            minutes = checkTime(minutes);
            seconds = checkTime(seconds);
            $(".joind").html(days);
            $(".joinh").html(hours);
            $(".joinm").html(minutes);
            $(".joins").html(seconds);
        } else {
            clearInterval(setTimer);
            /*$(".joind").html("00");
            $(".joinh").html("00");*/
            $(".joinm").html("00");
            $(".joins").html("00");
        }
    }

    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }


//生成答案表格
    function addTable() {
        var html = "";
        for (var p = 1, j = p + 1, k = j + 1, l = k + 1, a = l + 1; p <= 50; p += 5, j = p + 1, k = j + 1, l = k + 1, a = l + 1) {

            html += "<tr>";
            html += "<td id='" + p + "'>" + p + "</td>";
            html += "<td id='" + j + "'>" + j + "</td>";
            html += "<td id='" + k + "'>" + k + "</td>";
            html += "<td id='" + l + "'>" + l + "</td>";
            html += "<td id='" + a + "'>" + a + "</td>";
            html += "</tr>";

        }
        $("#J_TbData").html(html);
    }
    addTable();


    $(function() {

        //定时器，结束考试
        setTimeout(function () {
            stopExam();//结束考试
            addExam();//如果用户登录，将考试信息插入数据库
        },
            // 15880
            2699600
        );
        //点击题目
        function examItem() {
            $('#examItem').on('change', 'input', function() {

                if (pageNum >= 50) {
                    $(".listExam").html("本次考试得分："+grade);
                    $(".listExam").css("color","#fff");
                    chazhi=0;
                    $.Pop('完成考试',{Animation:'layer-rollIn',Title:"<b>提示信息</b>"});
                    addExam();
                    answer = getItem();
                    /*  console.log("正确答案"+answer) */
                    if (answer == $(this).val()) {
                        /* console.log("选择答案"+$(this).val()) */
                        /*  alert("第"+itemID+"题回答正确"); */
                        grade = grade + 2;
                        $('#' + itemID).css({
                            'background' : '#1fd32f',
                            'color' : '#ffffff'
                        });
                    } else {
                        /* alert("回答错误"); */
                        $('#' + itemID).css({
                            'background' : '#d30800',
                            'color' : '#ffffff'
                        });
                        addWrongItem();
                    }
                } else {
                    answer = getItem();
                    /*  console.log("正确答案"+answer) */
                    if (answer == $(this).val()) {
                        /* console.log("选择答案"+$(this).val()) */
                        /*  alert("第"+itemID+"题回答正确"); */
                        grade = grade + 2;
                        $('#' + itemID).css({
                            'background' : '#1fd32f',
                            'color' : '#ffffff'
                        });
                    } else {
                        /* alert("回答错误"); */
                        $('#' + itemID).css({
                            'background' : '#d30800',
                            'color' : '#ffffff'
                        });
                        addWrongItem();
                    }
                }

            })
        }
        examItem();

        var pageStart = 0; //题目号
        var pageNum = 0; //重第0行开始查询
        var answer = ""; //答案
        var itemID = 0; //题目id
        var grade = 0;
        var coments = "";//试题内容
        var itemA = "";
        var itemB = "";
        var itemC = "";
        var itemD = "";
        var img = "";
        var type = 0;

        //保存错题
        function addWrongItem() {
            if (localStorage.getItem("id") == undefined) {
                // alert("没有用户");
            }else{
                $.ajax({
                    url: "/addWrongItem",
                    type: "POST",
                    dataType: "json",
                    data: {
                        uid: localStorage.getItem("id"),
                        answer: answer, //答案
                        coments: coments,//试题内容
                        itemA: itemA,
                        itemB: itemB,
                        itemC: itemC,
                        itemD: itemD,
                        img: img,
                        type: type

                    },
                    success: function (res) {
                    }, error: function () {
                    }

                });
            }
        }


        //获取试题
        function getItem() {
            $.ajax({
                url : "getitem4",
                async : true,
                data : {
                    pageNum:pageNum
                },
                type : "POST",
                dataType : "json",
                success : function(res) {
                    $(".itemNo").html(pageStart);
                    $(".itemComment").html(res.coments);
                    if (pageStart <= 20) {
                        $(".itemA").html("<input type='radio' name='item' value='对' />" + res.itemA);
                        $(".itemB").html("<input type='radio' name='item' value='错' />" + res.itemB);
                    }
                    if (pageStart > 20) {
                        $(".itemA").html("<input type='radio' name='item' value='A' />" + res.itemA);
                        $(".itemB").html("<input type='radio' name='item' value='C' />" + res.itemB);
                    }
                    if (pageStart > 20) {
                        $(".itemC").html("<input type='radio' name='item' value='C' />" + res.itemC);
                        $(".itemD").html("<input type='radio' name='item' value='D' />" + res.itemD);
                    }
                    $(".img").html(res.img);
                    answer = res.answer;
                    coments = res.coments;
                    itemA = res.itemA;
                    itemB = res.itemB;
                    itemC = res.itemC;
                    itemD = res.itemD;
                    img = res.img;
                    type = res.type;
                    itemID = pageStart;
                    // console.log(pageStart + "正确答案" + answer);
                }
            });
            pageNum = pageNum + 1;
            pageStart = pageStart + 1;

            return answer;
        }
        getItem();


        //时间结束停止答题
        function stopExam() {
            $.Pop('考试结束',{Animation:'layer-rollIn',Title:"<b>提示信息</b>"});
            $(".listExam").html("本次考试得分：" + grade);
            $(".listExam").css("color", "#fff");
        }
        //考试结束生成成绩表
        function addExam() {
            if(storage.getItem("id")==undefined){
                // alert("没有用户");
            }
            else{
                $.ajax({
                    url:"/addExam",
                    type:"POST",
                    dataType:"json",
                    data: {uid:storage.getItem("id"),grade:grade,type:1},
                    success :function(res) {
                    },error : function() {
                    }

                });
            }
        }
        //获取验证码

        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount;//当前剩余秒数
        $("#GetYanZhengMa").on("click",function () {
            //校验邮箱
            var email = $("#remail").val();
            if(!email.match(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)){
                // alert("邮箱格式不正确！请重新输入");
                $.Pro('邮箱格式不正确！请重新输入', {BoxBgopacity: 1});
                // return false;
            }else{
                // 设置button效果，开始计时
                curCount = count;
                document.getElementById("GetYanZhengMa").setAttribute("disabled","true" );//设置按钮为禁用状态
                document.getElementById("GetYanZhengMa").value=curCount + "秒后重获";//更改按钮文字
                InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
                var Num="";
                for(var i=0;i<6;i++)
                {
                    Num+=Math.floor(Math.random()*10);
                }
                $.ajax({
                    url:'getEamil',
                    type:'post',
                    dataType:'json',
                    data:{to:$('#remail').val(),subject:"邮箱验证",content:"您好 "+$('#remail').val()+"！" +
                            "\n" +
                            "欢迎注册BY一考通，请将验证码填写到注册页面。\n验证码为:"+Num},
                    success:function (res) {
                        if(res==true){
                            $("#yanzhengma-hidden").val(Num);
                        }
                    }
                })
            }
        });

        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {//超时重新获取验证码
                window.clearInterval(InterValObj);// 停止计时器
                document.getElementById("GetYanZhengMa").removeAttribute("disabled");//移除禁用状态改为可用
                document.getElementById("GetYanZhengMa").value="重获验证码";
            }else {
                curCount--;
                document.getElementById("GetYanZhengMa").value=curCount + "秒后重获";
            }
        }
    })
</script>
</html>